<!--右侧边栏内容区尾部
   ---------------------------------
-->

<template>
     <div class="right-max">
          <div class="right-max-container">
               <ul class="right-ul">
                    <li class="right-ul-li"  
                     v-for="todo of item" 
                     :key="todo.id"
                     @click="eee"
                     >
                             <div class="title">{{todo.title}}</div>
                         <div class="triangle_border_right">
                         </div>
                     
                    </li>
                 
               </ul>
          </div>
           
          
         </div>
</template>

<script>
     const list=[{
          id:1,
          title:'职员回款统计',
     },{ 
          id:2,
          title:'职员回款统计',
     },{ 
          id:3,
          title:'职员回款统计',
     },{ 
          id:4,
          title:'职员回款统计',
     },{ 
          id:5,
          title:'职员回款统计',
     },{ 
          id:6,
          title:'职员回款统计',
     },{ 
          id:7,
          title:'职员回款统计',
     },{ 
          id:8,
          title:'职员回款统计',
     },{ 
          id:9,
          title:'职员回款统计',
     },{ 
          id:10,
          title:'职员回款统计',
     }]
export default {
     data(){
          return {
              item: list
          }
     },
     methods:{
          eee(){
               alert('eee')
          }
     }
}
</script>

<style lang='scss' scoped>
 .triangle_border_right{
    width:0;
    height:0;
    border-width:7px 0 7px 7px;
    border-style:solid;
    border-color:transparent transparent transparent #f0851b;/*透明 透明 透明 灰*/
    margin-left:  7%;
}
@media screen and (max-width:1390px){
.title{ font-size: 13px !important;}
}


.title{
     font-size: 15px;
     color:#b6b6b6;
     cursor: pointer;
}
.title:hover{
     color: red;
}
.right-max{
 height:44%;
    &-container{
         height: 80%;
     //     width: 80%;
      width:100%;
      // border: 1px solid;
        margin: auto;
        margin-top:23px;
    }
}
.right-ul{
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
    &-li{
         width:33%;
         height:15%;
         display: flex;
       // border: 1px solid;
         justify-content: center;
         align-items: center;
         margin-right: 6%;
    margin-left: 7%;
          }
}
</style>
